<template>
	<view class="custom-tabbar">
		<view class="tab-bar flex justify-between text-center">
			<view 
				class="tab-item" 
				v-for="(item, index) in tabBarList" 
				:key="index" 
				@click="switchTab(index)" 
				:class="{active: currentIndex === index}"
			>
				<text class="iconfont" :class="item.icon" style="font-size: 40rpx;"></text>
				<text class="block">{{ item.text }}</text>
				<!-- 激活时显示的小红点或角标 -->
				<view class="badge" v-if="item.badge && currentIndex !== index">{{ item.badge }}</view>
				<view class="active-indicator" v-if="currentIndex === index"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CustomTabbar",
		props: {
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabBarList: [
					{ icon: 'icon-home', text: '首页', url: '/pages/index/index' },
					{ icon: 'icon-order', text: '订单', url: '/pages/order/index', badge: '2' },
					{ icon: 'icon-user', text: '我的', url: '/pages/user/index' }
				]
			}
		},
		methods: {
			switchTab(index) {
				if (this.currentIndex !== index) {
					uni.redirectTo({
						url: this.tabBarList[index].url
					})
				}
			}
		}
	}
</script>

<style>
	.custom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(90deg, #ffffff, #f5fff5); /* 渐变背景 */
		padding: 10rpx 0 20rpx;
		border-top: 1rpx solid #eee;
		z-index: 999;
		box-shadow: 0 -4rpx 20rpx rgba(76, 175, 80, 0.15); /* 绿色阴影 */
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.tab-bar .tab-item {
		flex: 1;
		color: #888;
		position: relative;
		padding: 10rpx 0;
		transition: all 0.3s ease;
	}
	
	.tab-bar .tab-item.active {
		color: #4caf50; /* 青春绿色 */
		transform: scale(1.1);
		font-weight: 500;
	}
	
	/* 激活时的指示器 */
	.active-indicator {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background: #4caf50;
		border-radius: 0 0 10rpx 10rpx;
		animation: indicatorSlide 0.3s ease;
	}
	
	@keyframes indicatorSlide {
		from {
			width: 0;
		}
		to {
			width: 60rpx;
		}
	}
	
	/* 角标样式 */
	.badge {
		position: absolute;
		top: -10rpx;
		right: 20%;
		background: #ff3b30;
		color: white;
		font-size: 20rpx;
		min-width: 30rpx;
		height: 30rpx;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
		transform: translateX(50%);
		box-shadow: 0 4rpx 8rpx rgba(255, 59, 48, 0.3);
	}
	
	/* 图标动画效果 */
	.tab-bar .tab-item .iconfont {
		transition: all 0.3s ease;
	}
	
	.tab-bar .tab-item.active .iconfont {
		animation: iconBounce 0.5s ease;
	}
	
	@keyframes iconBounce {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-10rpx);
		}
	}
</style>